<template>
  <div class="noticeBox">
    <div class="noticeTitle">常见问题</div>
    <div class="noticeList">
      <ul>
        <li>第一条数问题据标题展示</li>
        <li>第一条数问题据标题展示</li>
        <li>第一条数问题据标题展示</li>
        <li>第一条数问题据标题展示</li>
        <li>第一条数问题据标题展示</li>
      </ul>
    </div>
    <div class="noticeConten">
      <div class="noticeConten-title">高中学习课程如何添加</div>
      <div
        class="noticeConten-info"
      >内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
      内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
      内容内容内容内容内容内容内容</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.noticeBox {
  padding: 20px;
  .noticeTitle {
    padding: 10px;
    background-color: #87cefa;
  }
  .noticeList {
    border-bottom: 1px solid #898989;
    ul {
      overflow: hidden;
      li {
        margin: 10px 0;
      }
      li:hover {
        cursor: pointer;
        transition: color 0.5s;
        color: #1e90ff;
      }
    }
  }
  .noticeConten {
    margin: 20px 20%;
    .noticeConten-title {
      text-align: center;
      margin: 20px 0;
      font-size: 20px;
      font-weight: 600;
    }
    .noticeConten-info {
      color: #999;
      font-size: 14x;
      line-height: 25px;
    }
  }
}
</style>
